/* 改变主题色变量 */

$--color-primary: #075eed;

/* 改变 icon 字体路径变量，必需 */

$--font-path: '~element-plus/theme-chalk/fonts';
@import 'element-plus/dist/index.css';
:root {
  //
  --el-color-primary: #075eed;
  --el-color-primary-light-1: #075eed;
  --el-color-primary-light-2: #35bbce;
  --el-color-primary-light-3: #80d4e0;
  --el-color-primary-light-9: #e5f6f8;
  //
  --el-color-success: #00a870;
  --el-color-success-light: #00a870;
  --el-color-success-lighter: #f0f9eb;
  //
  --el-color-warning: #f57e30;
  --el-color-warning-light: #fd7446;
  --el-color-warning-lighter: #ffc0ba;
  --el-color-danger: #f30707;
  --el-color-danger-light: #fd7446;
  --el-color-danger-lighter: #ffc0ba;
  --el-color-error: #f30707;
  --el-color-error-light: #fd7446;
  --el-color-error-lighter: #ffc0ba;
  --el-color-info: #666666;
  --el-color-info-light: #e9e9eb;
  --el-color-info-lighter: #f4f4f5;
  --el-dropdown-menuItem-hover-fill: #f1f3f5;
  /**
    text
  */
  --el-text-color-primary: #1a1a1a;
  --el-text-color-regular: #1a1a1a;
  --el-text-color-secondary: #9ca1a5;
  --el-text-color-placeholder: #9d9da2;
  //
  // --el-bg-color: #f7f8fa;
  //
  --el-border-color-base: #eaebee;
  //
  --el-box-shadow-base: 0px 2px 8px 0px rgba(200, 201, 204, 0.5);
  // --el-dialog-bg-color: white;
  --el-fill-color-light: #f1f3f5;
  --el-dropdown-menuItem-hover-fill: #f1f3f5;
  --el-dropdown-menuItem-hover-color: #1a1a1a;
  --el-text-color-regular: #1a1a1a;
  --el-text-color-secondary: #9ca1a5;
  //
  // --el-bg-color: #f7f8fa;
  //
  --el-border-color-base: #eaebee;
  --el-border-color: #eaebee;
  //
  --el-box-shadow-base: 0px 2px 8px 0px rgba(200, 201, 204, 0.5);
  // --el-dialog-bg-color: white;
  --el-fill-color-light: #f1f3f5;
  --el-dropdown-menuItem-hover-fill: #f1f3f5;
  --el-dropdown-menuItem-hover-color: #1a1a1a;
  --el-color-danger: #f00000;
  --el-popover-border-radius: 8px;
}

// button
.el-button {
  min-width: 80px;
  padding: 0px 15px !important;
  font-size: 14px;
  height: 32px;
  min-height: 32px;
  line-height: 32px;
  border-color: #eaebee;
  color: #1a1a1a;
  &:focus {
    border-color: #eaebee;
    color: #1a1a1a;
    background: #fff;
  }
  // &:not(.is-disabled):active {
  //   border-color: #009ab0 !important;
  //   color: #009ab0 !important;
  //   background: #fff !important;
  // }
  &:hover {
    border-color: #d8dadd;
    color: #1a1a1a;
    background: #fff;
  }
  &.is-disabled {
    color: #9ca1a5;
    border: 1px solid #dcdcdc;
  }
  &:focus-visible {
    outline: 0;
  }
  span {
    font-weight: 400;
  }
}

.el-button--primary {
  color: white;
  background: #075eed;
  border: 1px solid #075eed;
  &:focus {
    border-color: #075eed;
    color: white;
    background: #075eed;
  }
  // &:not(.is-disabled):active {
  //   border-color: #075EED !important;
  //   color: white !important;
  //   background: #075EED !important;
  // }
  &:hover {
    border-color: #075eed;
    color: white;
    background: #075eed;
    opacity: 0.8;
  }
  &.is-disabled {
    background: #93bcff;
    border-color: #93bcff;
    color: white;
  }
}

.el-button--danger {
  color: white;
  background: #f54a45;
  border: 1px solid #f54a45;
  &:focus {
    border-color: #f54a45;
    color: white;
    background: #f54a45;
  }
  &:hover {
    border-color: #f54a45;
    color: white;
    background: #f54a45;
    opacity: 0.8;
  }
}
.button-danger {
  background: #f54a45 !important;
  border-color: #f54a45 !important;
}

// 蓝色线按钮
.el-button--primary.is-plain {
  border: 1px solid #075eed;
  background: white;
  color: #075eed;
}
// 红色线按钮
.el-button--danger.is-plain {
  border: 1px solid #f00000;
  background: white;
  color: #f00000;
}

.el-button--small {
  min-width: 64px;
  padding: 2px 8px !important;
  font-size: 12px;
  height: 24px;
  min-height: 24px;
  line-height: 18px;
}

.el-button--large {
  min-width: 88px;
  padding: 8px 24px !important;
  font-size: 16px;
  height: 40px;
  min-height: 40px;
  line-height: 22px;
}

.el-button + .el-button {
  margin-left: 16px;
}

// 文字按钮
.el-button--text:focus {
  color: $--color-primary;
}

.el-button--text.warning {
  color: var(el-color-danger);
}

.el-button.el-button--text.link:hover {
  color: var(--el-color-primary-light-2);
  text-decoration: underline;
}

.el-button.el-button--text.link:focus {
  color: $--color-primary;
  text-decoration: underline;
}

.el-button.el-button--text.link.is-disabled {
  color: #80d4e0;
}

// 红色线按钮
.el-button.el-button--warning.is-plain {
  background: #fff !important;
  border-color: #f30707;
  color: #f30707;
  &:hover {
    color: #f65151;
    border-color: #f65151;
  }
  &:active {
    color: #db0000;
    border-color: #db0000;
  }
  &.is-disabled {
    color: #f98383;
    border-color: #f98383;
  }
}

// el-message
.el-message {
  height: 48px;
  line-height: 48px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(200, 201, 204, 0.5);
  border-radius: 3px;
  border: 0;
  top: 20vh !important;
  min-width: 100px;
  p {
    line-height: 48px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a !important;
  }
  .el-message__icon {
    font-size: 18px;
  }
  .el-message-icon--info {
    color: $--color-primary;
  }
  .el-message-icon--success {
    color: var(--el-color-success);
  }
  .el-message--warning {
    color: var(--el-color-warning);
  }
  .el-message--error {
    color: var(--el-color-danger);
  }
}

/*
  应该是element的bug，确认框中的按钮，如果不设置buttonSize，就会默认是small。
  如果设置buttonSize，接口定义会报错
  所以，强制设定大小，如有需要，请在具体业务页面覆盖
*/

.el-message-box {
  padding: 24px;
  --el-messagebox-border-radius: 12px;
  .el-message-box__close {
    color: #1a1a1a !important;
  }
  .el-message-box__header {
    padding: 0;
    .el-message-box__title {
      font-size: 16px;
      font-weight: bold;
      font-family: MiSans-Regular;
    }
    .el-message-box__headerbtn {
      top: -2px;
      right: 0;
      font-size: 22px;
    }
  }
  .el-message-box__content {
    margin-top: 24px;
    padding: 0;
    margin-bottom: 22px;
    .el-message-box__message {
      color: #76767e;
    }
    .message-black {
      color: #1a1a1a;
      margin-bottom: 24px;
    }
    .el-message-box__message p {
      line-height: 22px;
    }
  }
  .el-message-box__btns {
    padding: 0;
    button:nth-child(2) {
      margin-left: 12px;
    }
  }
}

// input
.el-input {
  line-height: 32px;
  // 设置maxlength，且show-word-limit时，这个校验的icon会展示，感觉应该是element的bug，这里强制隐藏
  // 如果需要展示，请在业务页面覆盖
  .el-input__validateIcon {
    display: none;
  }
  .el-input__count {
    .el-input__count-inner {
      letter-spacing: -1px;
    }
  }
}

.el-input.is-disabled .el-input__inner {
  border: none;
}

.el-input.word-limit {
  .el-input__count {
    .el-input__count-inner {
      color: #075eed !important;
    }
  }
}

.el-input__wrapper {
  padding: 1px 8px;
  .icon-_sousuo {
    margin-left: 8px;
    color: #76767e;
  }
}

// .is-focus {
//     box-shadow: 0 0 0 1px #075EED inset !important;
// }
.el-input__inner {
  height: 32px;
  line-height: 32px;
  // padding-left: 8px;
  padding-right: 8px;
  border-color: #d3d5d6;
}

.el-input__inner:hover {
  border-color: $--color-primary !important;
}

// .el-textarea:hover {
//   box-shadow: 0 0 0 1px #14bdc8 inset;
// }
.el-textarea__inner {
  resize: none;
  box-shadow: 0 0 0 1px #dcdee0 inset;
  line-height: 20px;
  &:hover,
  &:focus {
    box-shadow: 0 0 0 1px #075eed inset;
  }
}

.el-input__count-inner {
  color: #9ca1a5;
}

.el-textarea .el-input__count {
  color: #9ca1a5;
}

.textarea-limit {
  .el-textarea__inner {
    border-color: var(--el-color-danger);
  }
  .el-input__count {
    color: var(--el-color-danger);
  }
}

.el-textarea .el-input__count {
  color: #9ca1a5;
}

.el-select {
  .el-select__caret {
    color: #76767e;
    &.is-reverse {
      color: #075eed;
    }
  }
}

.el-select-dropdown__list,
.el-cascader-menu__list {
  padding: 4px 0;
}
.el-select-dropdown__item,
.el-cascader-node {
  margin: 0 4px 4px;
  padding: 0 8px;
  border-radius: 5px;
  &:hover {
    background: #f1f3f5;
  }
  &:active {
    background: #eff4ff;
  }
  &.selected {
    background: #eff4ff;
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.el-select-dropdown__item.is-selected {
  font-weight: 400;
}

.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
  background: #f1f3f5;
}

.el-cascader-node.is-active {
  background: #eff4ff;
  .el-cascader-node__prefix {
    left: 3px;
  }
}

// table
.el-table {
  &::before,
  .el-table__inner-wrapper::before {
    height: 0;
  }
  ::-webkit-scrollbar {
    height: 6px; // 纵向滚动条
  }
  table {
    width: 100% !important;
  }
  .el-table__body {
    width: 100%;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0 4px;
  }
  /*
    overflow: hidden;
    是为了满足UI 表格的边框及圆角需要
    如果需要页头不动，body滚动，可自行在业务页面内部设置 overflow-y: auto；
        .el-table__fixed-header-wrapper
  */
  .el-table__header-wrapper {
    border-radius: 5px 5px 0 0;
    overflow-y: hidden;
    background: #f9fafb;
    // border: 1px solid #ebebeb;
    // border-bottom: 0;
    .el-table__header {
      th {
        background: #f9fafb;
        color: #000000;
        font-size: 13px;
        border-bottom: 0;
        padding: 6px 0;
      }
    }
  }
  td.el-table__cell {
    border-bottom: 0;
    font-size: 13px;
    padding: 7px 0;
    // border-bottom: 1px solid #d8dadd;
  }
  thead th {
    font-weight: 400;
  }
  .el-table__empty-text {
    font-size: 13px;
    color: #76767e;
  }
}
.el-table__body-wrapper {
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  // border: 1px solid #ebebeb;
  // border-top: 0;
  color: #1a1a1a;
  // .el-table__body {
  //   & > tbody > tr:last-child {
  //     td {
  //       border-bottom: 0;
  //     }
  //   }
  //   & > tbody > tr > td {
  //     &:first-child {
  //       border-radius: 5px 0 0 5px;
  //     }
  //     &:last-child {
  //       border-radius: 0px 5px 5px 0px;
  //     }
  //   }
  // }
  .el-scrollbar__bar {
    height: 0;
  }
}

.el-table__fixed-header-wrapper {
  .el-table__header {
    th {
      font-weight: 500;
      font-family: MiSans-Regular;
      color: #666666;
    }
  }
}

.el-table__fixed-body-wrapper {
  color: #1a1a1a;
}

.el-checkbox {
  height: 32px;
}

/*
     表格空的的时候，高度一直在增长,默认给个强制高度
  */

.el-table__empty-block {
  height: 300px !important;
}

.el-table__fixed,
.el-table__fixed-right {
  box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.12);
}

.el-table__body-wrapper tr td.el-table-fixed-column--right {
  background: transparent;
}

// el-form
.el-form {
  .el-form-item {
    margin-bottom: 18px;
    .el-form-item__label {
      line-height: 32px;
      font-weight: 400;
      position: relative;
    }
    .el-form-item__content {
      line-height: 32px;
      .disabled {
        padding: 0 15px;
        width: 100%;
        height: 32px;
        line-height: 32px;
        color: #9ca1a5;
        border-radius: 3px;
        box-sizing: border-box;
        background: #f4f6f8;
      }
    }
    &.is-required:not(.is-no-asterisk).asterisk-left
      > .el-form-item__label:before {
      position: absolute;
      left: -10px;
    }
  }
}

// .tooltip-tips {
//   padding: 8px !important;
//   min-width: 180px;
//   max-width: 200px;
//   line-height: 22px;
//   font-size: 14px;
//   font-weight: 400;
//   text-align: justify;
// }

// el-dialog
.el-overlay-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-dialog {
  position: relative;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  max-height: 90%;
  .el-dialog__header {
    padding: 0 60px 0 24px;
    margin-right: 0;
    height: 64px;
    display: block;
    background: #fff;
    border-bottom: 1px solid #eaebee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .el-dialog__title {
      font-size: 16px;
      font-family: MiSans-Regular;
      font-weight: 500;
      color: #1a1a1a;
      line-height: 64px;
    }
    .el-dialog__headerbtn {
      font-size: 22px;
      width: 64px;
      height: 64px;
      top: 0;
      --el-color-info: #000;
    }
  }
  .el-dialog__body {
    padding: 16px 24px 14px;
  }
  .el-dialog__footer {
    padding: 0 24px 24px;
  }
}
.el-overlay {
  &.no-border-bottom {
    .el-dialog__header {
      border-bottom: none;
    }
    .el-dialog__body {
      padding: 12px 24px 14px;
    }
  }
}
/*
翻页 pagination
*/

.pagination {
  .el-pagination {
    .el-pager li,
    .btn-prev,
    .btn-next {
      background: none;
      border: 1px solid #d3d5d6;
      height: 32px;
      width: 32px;
      border-radius: 3px;
      font-weight: 400;
      color: #575e6c;
    }
    .el-select .el-select__wrapper {
      width: 90px;
      height: 32px;
      .el-input__inner {
        height: 32px;
      }
    }
  }
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next {
    border: none;
    color: #666;
  }
  // .el-pagination.is-background .el-pager li:not(.disabled).active {
  //   border: none;
  // }
  .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    // background-color: #3c414c;
    border: 1px solid #eaebee;
    font-weight: 400;
  }
  .el-select .el-input .el-input__inner,
  .el-pagination__jump,
  .el-pagination__editor.el-input .el-input__inner {
    color: #575e6c;
    font-size: 14px;
  }
}

.el-input--medium {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-input__icon {
    line-height: 32px;
  }
}

.el-input--small {
  .el-input__inner {
    height: 24px;
    line-height: 24px;
  }
  .el-input__icon {
    line-height: 24px;
  }
}

// select 下拉框箭头颜色
.el-select .el-input .el-select__caret {
  color: #666666;
  font-size: 12px;
}

.el-popper {
  padding: 5px 8px;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1a1a1a !important;
}

// 抽屉
.el-drawer {
  .el-drawer__header {
    margin: 0;
    padding: 0 16px;
    height: 55px;
    color: rgba(0, 0, 0, 0.9);
    font-size: 16px;
    font-weight: 500;
    font-family: MiSans-Regular;
    border-bottom: 1px solid #e7e7e7;
  }
}

.el-input__icon svg {
  color: #575e6c;
}

/* 修改滚动条的宽度 */

::-webkit-scrollbar {
  width: 6px;
}

/* 修改滚动条的前景颜色 */

::-webkit-scrollbar-thumb {
  background-color: #d8dadd;
  /* Chrome、Safari等WebKit内核的浏览器支持此属性 */
}

/* 添加滚动条的边角弯曲效果 */

::-webkit-scrollbar-thumb:hover {
  border-radius: 3px;
  /* Chrome、Safari等WebKit内核的浏览器支持此属性 */
}

/* 调整滚动条的不透明度 */

::-webkit-scrollbar-thumb:active {
  opacity: 0.7;
  /* Chrome、Safari等WebKit内核的浏览器支持此属性 */
}

/* 更改鼠标移入滚动条时的光标形状为手型 */

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  /* Chrome、Safari等WebKit内核的浏览器支持此属性 */
}

.el-input__suffix {
  .el-input__suffix-inner {
    border-color: none;
    .el-input__clear:before {
      // content: '\e7e7' !important;
      color: #999999;
      font-size: 16px;
    }
  }
}

.el-tabs__item {
  font-weight: 400;
}
.el-tabs__item.is-active {
  font-weight: 500;
  font-family: MiSans-Regular;
}
.el-tabs__nav-wrap::after {
  height: 1px !important;
}

.el-tabs__active-bar {
  height: 3px;
  border-radius: 3px 3px 0px 0px;
}

.red {
  color: #f00000;
}
.gray {
  color: #76767e;
}

.el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border-color: var(--el-text-color-placeholder);
  &::after {
    left: 5px;
    position: absolute;
    top: 2px;
  }
}
.el-tree {
  .el-tree-node__expand-icon {
    color: #76767e;
    font-size: 13px;
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background: #dee6f8;
    color: #075eed;

    .el-tree-node__expand-icon {
      color: #075eed;
    }
  }
}
.el-popper.is-customized {
  background-color: #333333;
  color: white;
  border-radius: 5px;
  padding-left: 12px;
  padding-right: 12px;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-color: #333333;
  color: white;
}
